<!--
  围栏告警地图modal
  value:{
    id      :string(告警id),
    fenceId :string(围栏id)
  }
-->
<template>
  <Modal :value="show" @on-visible-change="changeModal" title="查看地图" width="900px" :footerHide="true">
    <div class="map-container">
      <div id="js_elec_map" style="width:100%;height:calc(70vh - 51px);"></div>
      <div class="map-window">
        <Card :padding="10">
          <table class="infowindow-table">
            <tr v-for="(v,k,i) in tableData" :keys="`map-info-${i}`">
              <td class="label">{{k}}：</td>
              <td>{{v}}</td>
            </tr>
          </table>
        </Card>
      </div>
    </div>

    <Spin size="large" fix v-if="isModalLoading"></Spin>
    <div slot="footer">
      <Button type="text" @click="closeModal">关闭</Button>
    </div>
  </Modal>
</template>

<style lang="less" scoped>
  .ivu-card{
    margin-top: 0;
  }
  .map-container{
    position: relative;margin: -15px;
    .map-window{
      position: absolute;top: 10px;right: 10px;
    }
  }
  .infowindow-table {
    width: 270px;
    td {
      padding: 3px 5px;
    }
    .label {
      width: 30%;text-align: right;vertical-align: top;
    }
  }
</style>

<script>
	import {mapState,mapActions,mapMutations} from 'vuex'
  import {post}  	    from '@/util/request'
  import moment       from 'moment'
  import Map          from '@/plugin/Map'
  import Maprail      from '@/plugin/Map/Maprail'
  import MapRouter    from '@/plugin/Map/MapRouter'
  import {getAddress} from '@/plugin/Map/Mapaddress'
  import alarmIcon    from '@/assets/images/mapIcons/alarm.png'

  let map, route;
  export default {
    props:['value','show'],
    mounted(){
      map = new Map('js_elec_map', {
          resizeEnable: true,
          zoom:11,
          center: [116.397428, 39.90923]
      });
      route = new MapRouter({map});
    },
    data(){
      return {
        isModalLoading:false,
        mapData:{},
        tableData:{}
      }
    },
    watch:{
      mapData(v) {
        // 围栏
        let type = v.elecFenceLocs[0].model;
        let elec = new Maprail({map,type,data:v.elecFenceLocs,label:v.alarmVo.fenceName});
        // 告警点
        let alarmPoint = new AMap.LngLat(v.alarmVo.lng,v.alarmVo.lat);
        let alarmMarker = new AMap.Marker({
          map,position:alarmPoint,zIndex:102,title:'告警地点',
          icon: new AMap.Icon({image:alarmIcon,size:new AMap.Size(19,33),imageSize:new AMap.Size(19,33)})
        });

        let data = {
          '车牌号'  :v.alarmVo.plateNumber,
          '驾驶员'  :v.alarmVo.driverName?v.alarmVo.driverName:'--',
          '围栏名称':v.alarmVo.fenceName,
          '告警类型':v.alarmVo.alarmTypeStr,
          '告警地点':v.alarmVo.address,
          '告警时间':v.alarmVo.alarmTime
        };
        this.tableData = data;
        // 轨迹
        let gps = v.gps.map(g => [g.lng,g.lat]);
        // 如果是驶出告警，把告警点加入轨迹的最后
        // if (v.alarmVo.type === 2){
          // gps.push([v.alarmVo.lng,v.alarmVo.lat]);
        // }
        if (gps.length > 0){
          let routeData = [{
            name:'行驶轨迹',
            path:gps,
            color:'#02c2d7'
          }];
          // route.setStart(gps[0]);
          route.setData(routeData);
        }
      }
    },
    computed:{
    },
    methods:{
      changeModal(e){
        !e && map.clearMap();
        !e && route.clear();
        !e && this.closeModal();

        if (e && this.value) {
          let query = {alarmId:this.value.id};
          this.isModalLoading = true;
          post('/index/findFenceDetail', query).then(async res => {
            let alarm = res.data.data.alarmVo;
            let adds = await getAddress([[alarm.lng,alarm.lat]]);
            alarm.address = adds.length ? adds[0].formattedAddress : '--';
            alarm.alarmTime = moment(alarm.createTime).format('YYYY-MM-DD HH:mm:ss');
            alarm.alarmTypeStr = '';
            switch (Number.parseInt(alarm.type)) {
              case 1: alarm.alarmTypeStr = '驶入告警'; break;
              case 2: alarm.alarmTypeStr = '驶出告警'; break;
              case 3: alarm.alarmTypeStr = '停留告警'; break;
              case 4: alarm.alarmTypeStr = '超速告警'; break;
            }
            this.mapData = res.data.data;
            this.isModalLoading = false;
          });
        }
      },
      closeModal() {
        this.$emit('close');
      }
    }
  };
</script>
